<template>
    <div>
        <el-container>
            <el-main>
                <el-form :inline="true" :model="familyStore.familyQueyryData" class="demo-form-inline">
                    <el-form-item label=" 姓名">
                        <el-input v-model="familyStore.familyQueyryData.name" placeholder="请输入内容" clearable></el-input>
                    </el-form-item>
                    <el-form-item label=" 性别">
                        <el-select v-model="familyStore.familyQueyryData.gender" placeholder="请选择" style="width: 200px"
                            clearable>
                            <el-option label="男" value="男"></el-option>
                            <el-option label="女" value="女"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="familyStore.familyQueyryData.generation" placeholder="请选择"
                            style="width: 200px;" clearable>
                            <el-option label="第一代" value="第一代"></el-option>
                            <el-option label="第二代" value="第二代"></el-option>
                            <el-option label="第三代" value="第三代"></el-option>
                            <el-option label="第四代" value="第四代"></el-option>
                            <el-option label="第五代" value="第五代"></el-option>
                            <el-option label="第六代" value="第六代"></el-option>
                            <el-option label="第七代" value="第七代"></el-option>
                            <el-option label="第八代" value="第八代"></el-option>
                            <el-option label="第九代" value="第九代"></el-option>
                            <el-option label="第十代" value="第十代"></el-option>
                            <el-option label="第十一代" value="第十一代"></el-option>
                            <el-option label="第十二代" value="第十二代"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table :data="familyStore.familyTangList" table-layout="auto" row-key="ID" border
                    @cell-dblclick="Edit" style="width: 100%">
                    <el-table-column prop="ID" label="ID" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" align="center">
                        <template #default="scope">
                            <el-input v-model="scope.row.name" type="text" ref="inputRef"
                                v-if="isEdit.value && isEdit.rowId == scope.row.ID && isEdit.column === 'name'"
                                @blur="finishEdit(scope.row.ID)" @keyup.enter="finishEdit(scope.row.ID)"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gender" label="性别" align="center"></el-table-column>
                    <el-table-column prop="birthday" label="出生日期" align="center">
                        <template #default="scope">
                            {{
                                scope.row.birthday.replace('T', ' ').slice(0, 19)
                            }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="country" label="国籍" align="center"></el-table-column>
                    <el-table-column prop="region" label="地区" align="center"></el-table-column>
                    <el-table-column prop="spouse" label="配偶" align="center">
                        <template #default="scope">
                            <el-tag type="primary" size="large" v-if="scope.row.spouse">
                                {{ scope.row.spouse.name }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="father" label="父亲" align="center">
                        <template #default="scope">
                            <el-tag type="primary" size="large" v-if="scope.row.father">
                                {{ scope.row.father.name }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mother" label="母亲" align="center">
                        <template #default="scope">
                            <el-tag type="primary" size="large" v-if="scope.row.mother">
                                {{ scope.row.mother.name }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="generation" label="辈分" align="center"></el-table-column>
                    <el-table-column prop="CreatedAt" label="创建时间" header-align="center" align="center">
                        <template #default="scope">
                            {{
                                scope.row.CreatedAt.replace('T', ' ').slice(0, 19)
                            }}
                        </template>

                    </el-table-column>
                    <el-table-column prop="UpdatedAt" label="更新时间" header-align="center" align="center">
                        <template #default="scope">

                            {{
                                scope.row.UpdatedAt.replace('T', ' ').slice(0, 19) === '0001-01-01 00:00:00' ? '' :
                                    scope.row.UpdatedAt.replace('T', ' ').slice(0, 19)
                            }}

                        </template>
                    </el-table-column>
                    <el-table-column label="操作" header-align="center" align="center" min-width="110">
                        <template #default="scope">
                            <el-button type="primary" size="small"
                                @click="familyStore.update(scope.row.ID)">修改</el-button>
                        </template>
                    </el-table-column>"

                </el-table>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import { useFamilyStore } from '@/store/familyStroe.ts'


const familyStore = useFamilyStore()
const isEdit = reactive({
    value: false,
    column: '',
    rowId: null
})
const inputRef: any = ref(null)
const search = async () => {
    try {
        await familyStore.getFilterListFunc()
    } catch (e: any) {
        ElNotification({
            message: e,
            type: 'error',
        })
    }
}

onMounted(async () => {
    try {
        await familyStore.getFilterListFunc()
    } catch (e: any) {
        ElNotification({
            message: e,
            type: 'error',
        })
    }
})
const Edit = (row: any, column: any) => {
    isEdit.value = true
    console.log(column)
    isEdit.column = column.property
    isEdit.rowId = row.ID
    nextTick(() => {
        // 获取焦点
        inputRef.value.focus()
    })
}
const finishEdit = (rowId: number) => {
    isEdit.value = false
    isEdit.rowId = null
    isEdit.column = ''
    console.log(rowId)
}

</script>

<style scoped></style>